<template>
  <div>
    <el-input v-model="searchText" placeholder="输入关键字进行搜索"></el-input>
    <el-button type="primary" @click="showAddDialog">添加记录</el-button>
    <el-table :data="filteredOrders" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80"></el-table-column>
      <el-table-column prop="bookTitle" label="图书名称"></el-table-column>
      <el-table-column prop="borrower" label="借阅人"></el-table-column>
      <el-table-column prop="borrowDate" label="借阅日期">
        <template slot-scope="scope">
          {{ formatDate(scope.row.borrowDate) }}
        </template>
      </el-table-column>
      <el-table-column prop="returnDate" label="归还日期">
        <template slot-scope="scope">
          {{ scope.row.returnDate ? formatDate(scope.row.returnDate) : '-' }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
          <el-button type="text" @click="editOrder(scope.row)">编辑</el-button>
          <el-button type="text" @click="deleteOrder(scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="addDialogVisible" title="添加记录">
      <el-form :model="newOrder" ref="addForm" :rules="addFormRules" label-width="80px">
        <el-form-item label="图书名称" prop="bookTitle">
          <el-input v-model="newOrder.bookTitle"></el-input>
        </el-form-item>
        <el-form-item label="借阅人" prop="borrower">
          <el-input v-model="newOrder.borrower"></el-input>
        </el-form-item>
        <el-form-item label="借阅日期" prop="borrowDate">
          <el-date-picker v-model="newOrder.borrowDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="归还日期" prop="returnDate">
          <el-date-picker v-model="newOrder.returnDate" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="addOrder">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      orders: [
        { id: 1, bookTitle: 'Vue.js 实战', borrower: '张三', borrowDate: '2024-06-01', returnDate: '2024-06-15' },
        { id: 2, bookTitle: 'JavaScript高级编程', borrower: '李四', borrowDate: '2024-05-20', returnDate: '2024-06-10' },
        { id: 3, bookTitle: 'Python编程从入门到精通', borrower: '王五', borrowDate: '2024-06-05', returnDate: '' }
      ],
      searchText: '',
      addDialogVisible: false,
      newOrder: {
        bookTitle: '',
        borrower: '',
        borrowDate: '',
        returnDate: ''
      },
      addFormRules: {
        bookTitle: [{ required: true, message: '请输入图书名称', trigger: 'blur' }],
        borrower: [{ required: true, message: '请输入借阅人', trigger: 'blur' }],
        borrowDate: [{ required: true, message: '请选择借阅日期', trigger: 'change' }]
      }
    };
  },
  computed: {
    filteredOrders() {
      return this.orders.filter(order => {
        return order.bookTitle.toLowerCase().includes(this.searchText.toLowerCase()) ||
               order.borrower.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  },
  methods: {
    showAddDialog() {
      this.addDialogVisible = true;
      this.$refs.addForm.resetFields();
    },
    addOrder() {
      if (this.newOrder.id) {
    const index = this.orders.findIndex(order => order.id === this.newOrder.id);
    if (index !== -1) {
      this.orders.splice(index, 1, { ...this.newOrder });
    }
  } else {
    this.newOrder.id = this.orders.length + 1;
    this.orders.push({ ...this.newOrder });
  }
  this.addDialogVisible = false; // 关闭添加/编辑对话框
  this.$refs.addForm.resetFields(); // 重置表单
  this.newOrder = { // 重置新订单信息
    bookTitle: '',
    borrower: '',
    borrowDate: '',
    returnDate: ''
  };
    },
    editOrder(order) {
      // 编辑逻辑
      this.newOrder = { ...order }; // 将要编辑的订单信息填充到表单中
  this.addDialogVisible = true; // 打开添加/编辑对话框
    },
    deleteOrder(index) {
      this.orders.splice(index, 1);
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      return date.toLocaleDateString();
    }
  }
};
</script>

<style>
/* 在这里可以添加组件的样式 */
</style>
